<template>
  <div class="about">
    <el-container>
      <el-header>
        <div>
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item class="rou" @click="() => $router.push('/haier')"
              >Haier</el-menu-item
            >
            <el-menu-item class="rou">账号注册</el-menu-item>
            <el-menu-item class="mou">
              <span>我已注册,</span>
              <a
                target="_blank"
                style="color: rgb(50, 190, 255)"
                @click="() => $router.push('/')"
                >直接登录</a
              >
            </el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-main style="padding: 0">
        <div class="p1">
          <p>一个账号便利享受Haier所有服务</p>
        </div>
        <img :src="img" alt="" width="100%" />

        <div class="p1">
          <p>一个账号便利享受Haier所有服务</p>
        </div>

        <div
          class="register-main"
          style="dispaly: inline"
          v-if="$route.query.type === 'phone'"
        >
          <el-card class="box-card">
            <el-form
              :model="ruleForm"
              status-icon
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="手机号" prop="phone" label-width="200px">
                <el-input
                  style="width: 350px"
                  type="text"
                  v-model="ruleForm.phone"
                  placeholder="购买,安装,报修,手机注册更方便"
                ></el-input>
                <div>
                  <span class="R"
                    >使用
                    <a @click="change('email')">手机邮箱注册</a>或短信注册</span
                  >
                </div>
              </el-form-item>

              <el-form-item label="密码" prop="pass" label-width="200px">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  placeholder="6-16位,数字;字母或符号组合"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="确认密码"
                prop="checkPass"
                label-width="200px"
              >
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="CDKEY" label-width="200px">
                <el-input type="text" v-model="ruleForm.CDKEY"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="margin-left: 230px"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <div class="register-main" v-else>
          <el-card class="box-card">
            <el-form
              :model="ruleForm"
              status-icon
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="邮箱" prop="email" label-width="200px">
                <el-input
                  style="width: 350px"
                  type="email"
                  v-model="ruleForm.phone"
                  placeholder="常用邮箱方便接收免费服务"
                ></el-input>
                <div>
                  <span class="R"
                    >使用
                    <a @click="change('phone')">手机号码注册</a>或短信注册</span
                  >
                </div>
              </el-form-item>
              <el-form-item label="密码" label-width="200px">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  placeholder="6-16位,数字;字母或符号组合"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="确认密码"
                prop="checkPass"
                label-width="200px"
              >
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="margin-left: 230px"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <div class="p2">Haier账号支持所有产品和服务</div>
      </el-main>

      <el-footer style="padding: 0">
        <div class="footer-list">
          <ul>
            <li v-for="(item, index) in info" :key="index">
              <a href="">{{ item }}</a>
            </li>
          </ul>
          <li class="single">
            鲁ICP备09096283 | © 2000-2020 Haier.com. All rights reserved
          </li>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: require("@/assets/static/vipuser.jpg"),
      info: ["关于海尔", "联系我们", "法律声明", "帮助中心", "海尔门店"],
      ruleForm: {
        email: "",
        password: "",
        phone: "",
        checkPass: "",
      }
    };
  },
  methods: {
    change(type) {
      this.$router.push({
        path: "/register",
        query: {
          type: type,
        },
      });
    },
    submitForm() {
      this.$haier.post('/openapi/register', this.ruleForm).then(res=>{
        console.log(res)
      })
    }
  },
};
</script>

<style scoped>
.R a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}
.rou {
  padding-left: 50px;
  display: inline-block;
  position: relative;
  left: 5%;
}
.mou > a {
  text-decoration: none;
}

.mou {
  padding-left: 50px;
  display: inline-block;
  position: relative;
  left: 60%;
}
.el-main .p1 {
  text-align: center;
  display: block;
  line-height: 85px;
  color: #333;
  font-size: 28px;
  text-align: center;
  position: absolute;
  top: 150px;
  left: 40%;
}
.el-main .p2 {
  text-align: center;
  position: absolute;
  top: 800px;
  left: 45%;
}
.el-input {
  width: 350px;
}
.box-card {
  width: 840px;
  position: relative;
  left: 30%;
  bottom: 700px;
}
.R1 {
  display: none;
}
.footer-list {
  height: 60px;
  background-color: rgb(43, 44, 45);
  width: 100%;
}
.footer-list ul {
  margin-left: 250px;
}
.footer-list ul li {
  float: left;
  margin-left: 10px;
  font-size: 14px;
}
.footer-list ul li a {
  line-height: 60px;
  color: aliceblue;
  text-decoration: none;
}
.single {
  line-height: 60px;
  float: right;
  margin-right: 70px;
  color: aliceblue;
  font-size: 14px;
}
</style>